<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex flex-direction">
			<image style="width: 100rpx; height: 100rpx" :src="globalConfig.appInfo.logo" mode="widthFix"></image>
			<text class="title">智慧街道</text>
		</view>
		<view class="login-form-content">
			<view class="action-btn">
				<button open-type="getPhoneNumber" class="llogin-btn cu-btn block bg-blue lg" @getphonenumber="getPhoneNumber">微信用户快捷登录</button>
			</view>
			<view class="action-btn">
				<button @click="handleLogin" class="login-btn block lg phone">手机号码登录</button>
			</view>
		</view>

		<view class="xieyi text-center">
			<text class="text-grey1">点击登录即表示您同意</text>
			<text @click="handleUserAgrement" class="text-blue">《用户服务协议》</text>
		</view>
	</view>
</template>

<script>
import { getAccessToken } from '@/utils/auth'
export default {
	name: 'Login',
	data() {
		return {
			globalConfig: getApp().globalData.config
		}
	},
	mounted() {
		if (getAccessToken()) {
			this.$tab.switchTab('/pages/home/index')
		}
	},
	methods: {
		// 用户协议
		handleUserAgrement() {
			this.$tab.navigateTo(`/pages/login/agreement/index`)
		},
		// 获取微信手机号
		getPhoneNumber(e) {
			console.log()
			this.$store
				.dispatch('WxLogin', {
					code: e.detail.code
				})
				.then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				})
		},
		// 密码登录
		async pwdLogin(captchaParams) {
			this.$modal.loading('登录中，请耐心等待...')
			// 执行登录
			this.loginForm.captchaVerification = captchaParams.captchaVerification
		},
		// 登录成功后，处理函数
		loginSuccess(result) {
			// 设置用户信息
			this.$store.dispatch('GetInfo').then((res) => {
				this.$tab.reLaunch('/pages/home/index')
			})
		},
		// 手机登录
		async handleLogin() {
			this.$tab.navigateTo(`/pages/login/phonelogin/index`)
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}

.normal-login-container {
	width: 100%;
	.logo-content {
		width: 100%;
		font-size: 21px;
		text-align: center;
		padding-top: 15%;

		image {
			border-radius: 4px;
		}

		.title {
			margin-left: 10px;
		}
	}
	.login-form-content {
		text-align: center;
		margin: 20px auto;
		margin-top: 15%;
		width: 80%;

		.login-btn {
			margin: 60rpx 0;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
		}

		.xieyi {
			color: #333;
			margin-top: 20px;
		}

		.phone {
			border: 1px solid #0081ff;
			color: #0081ff;
			background-color: #ffffff;
		}
	}

	.easyinput {
		width: 100%;
	}
}

.login-code-img {
	height: 45px;
}
</style>
